<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入厂家名称"
              class="w-200"
              clearable
              @clear="query" />
    <el-button type="primary"
               @click="query">查 询</el-button>
    <el-button type="primary"
               @click="edit(null)">新 增</el-button>
    <el-table stripe
              :data="dataList"
              border
              style="width: 100%"
              class="mt-20">
      <el-table-column align="center"
                       label="图标"
                       width="100px"
                       heitht="50px">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl"
                    :preview-src-list="[scope.row.imageUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="品牌名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="factoryName"
                       label="厂家名称"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="录入时间"
                       min-width="120"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column label="操作"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click="edit(scope.row.id)">编 辑
          </el-button>
          <el-button type="danger"
                     size="mini"
                     @click="deleteData(scope.row.id)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="initTable"
          :pageTotal="totals"
          ref="page"></page>

    <el-dialog title="品牌详情"
               width="40%"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      <el-form :model="editModel">
        <el-form-item :label-width="formLabelWidth"
                      label="图标">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="editModel.imageUrl"
                 :src="editModel.imageUrl"
                 width="200px"
                 height="100px"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="品牌名称">
          <el-input v-model="editModel.name"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="厂家名称">
          <el-select v-model="editModel.factoryId">
            <el-option v-for="item in factoryList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="备注">
          <el-input v-model="editModel.remark"
                    type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveData()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "factoryBrandList",
    data () {
      return {
        searchCondition: '',
        formLabelWidth: '120px',
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        dataList: [],
        factoryList: [],
        dialogFormVisible: false,
        totals: 0,
        editModel: {}
      }
    },
    created () {
      this.initTable();
      this.initFactory(null);
    },
    methods: {
      query () {
        this.page.pageIndex = 0;
        this.initTable();
      },
      initFactory (name) {
        let param = {
          name: name,
          pageIndex: 0,
          pageSize: 50
        }
        this.post(this.api.factory.getFactoryList, param).then((res) => {
          if (res.data.code === '200') {
            this.factoryList = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      initTable () {
        let param = {
          name: this.searchCondition,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.factoryBrand.getPageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });

      },
      edit (id) {
        this.dialogFormVisible = true;
        if (id) {
          this.post(this.api.factoryBrand.getFactorBrandDetail, { id: id }).then((res) => {
            if (res.data.code === '200') {
              this.editModel = res.data.object;
            } else {
              this.$Message.error(res.data.message);
            }
          });
        }
      },
      deleteData (id) {
        this.post(this.api.factoryBrand.deleteFactorBrand, { id: id }).then((res) => {
          if (res.data.code === '200') {
            this.initTable();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      saveData () {
        this.post(this.api.factoryBrand.uploadFactorBrand, this.editModel).then((res) => {
          if (res.data.code === '200') {
            this.initTable();
            this.dialogFormVisible = false;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
      handleAvatarSuccess (res) {
        this.editModel.imageUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    }
    ,
    components: {
      Page,
    }
  }
</script>

<style scoped>
</style>
